import React from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import {
  Card,
  Table,
  Space,
  Button,
  Input,
  Image,
  Popconfirm,
  Typography,
  Select,
  Tabs,
} from 'antd';
import { SyncOutlined } from '@ant-design/icons';
import { connect } from 'umi';
import moment from 'moment';
import UploadUtil from '@/components/UploadUtil';
import IconFont from '@/components/Iconfont';
import { GetFileExt } from '@/services/crud';
import ImgQuick from './imgQuick';

const currControl = 'Attachment';
const { Search } = Input;
const { Text } = Typography;
class ViewPage extends React.Component<any, any> {
  constructor(props: any) {
    super(props);
    this.state = {
      loading: false,
      dataSource: [],
      visible: false,
      selectedRowKeys: [],
      pageIndex: 1,
      pageSize: 10,
      totalCount: 0,
      payload: {},
      record: {},
      keywords: '',
      fileExt: [],
      ext: null,
      isList: true,
    };
  }
  componentDidMount() {
    this.fetchDatas();
    this.fetchFileExt();
  }
  fetchFileExt = async () => {
    const resp = await GetFileExt();
    this.setState({ fileExt: resp?.result });
  };
  fetchDatas = () => {
    this.setState({ loading: true });
    const { pageIndex, pageSize, keywords, ext } = this.state;
    this.props
      .dispatch({
        type: 'Abp/getList',
        payload: { SkipCount: (pageIndex - 1) * pageSize, MaxResultCount: pageSize, keywords, ext },
        control: currControl,
      })
      .then(() => {
        var resp = this.props.response;
        if (resp && resp.result) {
          var dataSource = resp.result.items;
          this.setState({ loading: false, dataSource, totalCount: resp.result.totalCount });
        }
      });
  };
  handleDelete = (id: number) => {
    this.props
      .dispatch({
        type: 'Abp/delete',
        payload: { id },
        control: currControl,
      })
      .then(() => {
        this.fetchDatas();
      });
  };
  onSelectChange = (selectedRowKeys: any) => {
    this.setState({ selectedRowKeys });
  };
  onSearch = (keywords: any) => {
    this.setState({ keywords }, () => {
      this.fetchDatas();
    });
  };
  clickFun = (val: any) => {
    this.setState({ keywords: val });
  };
  doRefresh = () => {
    let _this = this;
    this.setState({ ext: null }, function () {
      _this.fetchDatas();
    });
  };
  render() {
    const {
      loading,
      dataSource,
      selectedRowKeys,
      totalCount,
      pageSize,
      fileExt,
      keywords,
    } = this.state;
    const imgexe = ['.jpg', '.jpeg', '.png', '.bmp', '.gif'];
    const columns = [
      {
        title: '文件',
        width: 60,
        dataIndex: 'sysRowID',
        render: (text: string, record: any) =>
          imgexe.includes(record.fileExtension) ? (
            <Image alt={text} width={60} height={48} src={UploadUtil.imgServ + text} />
          ) : (
            <IconFont
              style={{ fontSize: '30px' }}
              type={'icon-' + record.fileExtension.replace('.', '')}
            />
          ),
      },
      {
        title: '文件类型',
        dataIndex: 'fileExtension',
      },
      {
        title: '文件大小',
        dataIndex: 'fileSize',
        render: (text: string) => (
          <span>
            {text} <Text type="secondary">kb</Text>
          </span>
        ),
      },
      {
        title: '上传时间',
        dataIndex: 'creationTime',
        render: (text: string) => (
          <span>
            <Text type="secondary">{moment(text).format('YYYY-MM-DD hh:mm:ss')}</Text>
          </span>
        ),
      },
      {
        title: '文件名',
        dataIndex: 'fileName',
      },
      {
        title: '操作',
        render: (record: any) =>
          dataSource.length >= 1 ? (
            <span>
              <Popconfirm title="确定删除?" onConfirm={() => this.handleDelete(record.id)}>
                <a>删除</a>
              </Popconfirm>
            </span>
          ) : null,
      },
    ];
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
    };
    return (
      <PageHeaderWrapper>
        <Tabs type="card">
          <Tabs.TabPane tab="列表" key="1">
            <Card>
              <Space>
                <Button
                  type="primary"
                  onClick={this.doRefresh}
                  loading={loading}
                  icon={<SyncOutlined />}
                >
                  刷新
                </Button>
                <Select
                  style={{ width: 100 }}
                  placeholder="文件格式"
                  onChange={(value) => this.setState({ ext: value })}
                >
                  {fileExt
                    ? fileExt.map((item: any) => {
                        return (
                          <Select.Option key={item} value={item}>
                            {item}
                          </Select.Option>
                        );
                      })
                    : null}
                </Select>
                <Search
                  style={{ width: 240 }}
                  value={keywords}
                  placeholder="输入关键词搜索"
                  onSearch={(value) => this.onSearch(value)}
                />
              </Space>
            </Card>
            <Table
              rowKey="id"
              loading={loading}
              rowSelection={rowSelection}
              columns={columns}
              dataSource={dataSource}
              pagination={{
                onChange: (page) => {
                  this.setState({ pageIndex: page }, () => {
                    this.fetchDatas();
                  });
                },
                pageSize,
                total: totalCount,
              }}
            />
          </Tabs.TabPane>
          <Tabs.TabPane tab="缩略图" key="2">
            <ImgQuick gutter={16} column={8} ext='.jpg,.jpeg,.png,.gif' />
          </Tabs.TabPane>
        </Tabs>
      </PageHeaderWrapper>
    );
  }
}
export default connect(({ Abp }: API.IConnectState) => ({
  response: Abp.response,
  currentUser: Abp.currentUser,
}))(ViewPage);
